<template>
    <div class="phone-container">
        <div class="phone" v-for="(item,index) in arri" :key="index" @click="jump(item)">
          <div class="img">
            <img :src="item.img" alt="">
          </div>
          <div class="text">{{item.name}}</div>
          <p>{{item.content}}</p>
          <h1>￥{{item.price}}</h1>
        </div>

    </div>
</template>

<script>
export default {
  name: 'Phone',
  props: ['arri'],
  methods: {
    jump (i) {
      this.$router.push('/details')
      sessionStorage.setItem('arr', JSON.stringify(i))
    }
  }
}
</script>

<style scoped lang="less">
  .phone-container{
    width: 100%;
    background: #D4D4D4;
    overflow: hidden;
  }
  .phone{
    width: 50%;
    height: 4.2rem;
    background: #ffffff;
    float: left;
    margin-bottom: 0.2rem;
    p{
      color: #757575;
      margin-top: 0.06rem;
      text-indent: 0.15rem;
    }
    h1{
      color: #EA625B;
      margin-top: 0.06rem;
      text-indent: 0.15rem;
      font-weight: bold;
    }
  }
  .img{
    width: 100%;
    height: 70%;
    background: #7e652f;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .text{
    font-size: 0.28rem;
    font-weight: bold;
    text-indent: 0.15rem;
  }
</style>
